<template>
    <div class="ph-list" :type="type" :align="align" :mini="mini" :style="style" :nowrap="nowrap">
        <action-bar v-if="title" class="ph-list-header">
            <icon v-if="icon" :icon="icon" ph-mr/><span>{{title}}</span>
        </action-bar>
        <ul class="ph-list-content">
            <slot></slot>
        </ul>
        <action-bar v-if="$slots.footbar" class="ph-list-footer" :mini="true">
            <slot name="footbar"></slot>
        </action-bar>
    </div>
</template>
<script lang="ts" setup>
import { defineProps, defineAsyncComponent, computed } from 'vue'
const ActionBar = defineAsyncComponent(()=>import('../base/action-bar.vue'))
const Icon  = defineAsyncComponent(()=>import("../base/icon.vue"))
const props = defineProps({
    title:String,
    titleAlign:String,
    icon:String,
    mini:Boolean,
    align:String,
    type:String,
    nowrap:Boolean
})
const style = computed(()=>{
    return props.titleAlign?{
        '--ph-title-align':props.titleAlign
    }:null
})
</script>
<style lang="scss">
.ph-list{
    display:flex;
    flex-direction:column;
    border: 1px solid var(--ph-bd-light);
    border-radius: 5px;
    overflow:hidden;
    margin-bottom: var(--ph-20);
    color:var(--ph-c);
    overflow: auto;
    width:auto;
    font-size:var(--phx);
    -webkit-overflow-scrolling: touch;
    .ph-list-header{
        border-bottom-color:var(--ph-bd-light);
        justify-content: flex-start;
        border-top:none;
        border-left:none;
        border-right:none;
        justify-content: var(--ph-title-align,left);
    }
    .ph-list-footer{
        justify-content: flex-end;
        border-bottom:none;
        border-left:none;
        border-right:none;
    }
    &-content{
        line-height:inherit;
        overflow:auto;
        color: var(--ph-c);
        min-width: 100%;
    }
    &[type=button]{
        --ph-list-item-cursor:pointer;
    }
    &[align=center]{
        --ph-list-item-align:center;
    }
    &[mini=true]{
        --ph-list-item-padding:var(--ph-5) var(--ph-15);
    }
    &[nowrap=true]{
        --ph-list-item-wrap:nowrap;
    }
}
</style>
